<template>
  <c-scroll>
    <template slot="header">
      <div
        v-for="item in columns"
        :style="{ width: item.width, display: 'inline-block' }"
        :key="item.key"
        class="border"
      >
        {{ item.name }}
      </div>
      <div style="display: inline-block">操作</div>
    </template>
    <div class="border" v-for="(item, index) in data" :key="'table' + index">
      <div
        v-for="(key, val) in item"
        :key="val"
        style="display: inline-block"
        :class="{ ellipsis: ellipsis(val) }"
        :title="key"
        :style="{ width: width(val) }"
      >
        {{ key }}
      </div>
      <slot name="zuo" :data="item"></slot>
    </div>
  </c-scroll>
</template>

<script>
import cScroll from "./scroll.vue";

export default {
  components: {
    cScroll,
  },
  data() {
    return {
      columns: [
        {
          key: "name",
          name: "名字",
          width: "100px",
        },
        {
          key: "age",
          name: "年龄",
          width: "100px",
        },
        {
          key: "sex",
          name: "性别",
          width: "100px",
        },
        {
          key: "time",
          name: "时间",
          ellipsis: true,
          width: "100px",
        },
      ],
      data: [
        { name: "名字21", age: 12, sex: 0, time: new Date() },
        { name: "名字1s", age: 12, sex: 0, time: new Date() },
        { name: "名字s1", age: 12, sex: 0, time: new Date() },
        { name: "名字d1", age: 12, sex: 0, time: new Date() },
        { name: "名字s1", age: 12, sex: 0, time: new Date() },
        { name: "名字a1", age: 12, sex: 0, time: new Date() },
        { name: "名字f1", age: 12, sex: 0, time: new Date() },
        { name: "名字s1", age: 12, sex: 0, time: new Date() },
      ],
    };
  },
  methods: {
    ellipsis(key) {
      let obj = this.columns.find((res) => {
        return res.key === key;
      });
      if (obj.ellipsis) {
        return obj.ellipsis;
      } else {
        return false;
      }
    },
    width(key) {
      let obj = this.columns.find((res) => {
        return res.key === key;
      });
      if (obj.width) {
        return obj.width;
      } else {
        return "100%";
      }
    },
  },
  mounted() {
    console.log(this.$slots);
  },
};
</script>

<style>
.border {
  border-bottom: 1px solid black;
}
.ellipsis {
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
}
</style>
